<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Threepipe R3F React/JSX Sample</title>
    <style>
        html, body{
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>
    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
              "three": "./../../dist/index.mjs",
              "threepipe": "./../../dist/index.mjs",
              "react": "https://esm.sh/react@19",
              "react-dom/client": "https://esm.sh/react-dom@19/client",
              "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
              "@react-three/fiber": "https://esm.sh/@react-three/fiber@9.3.0?external=react,react-dom,three",
              "@threepipe/plugin-r3f": "./../../plugins/r3f/dist/index.mjs"
            }
        }
    </script>

    <script type="module" src="../examples-utils/global-loading.mjs"></script>
    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
    <!-- Include Babel for JSX transformation -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script id="example-script" type="text/babel" data-type="module">
    import {LoadingScreenPlugin, _testFinish, _testStart} from 'threepipe'
    import React from 'react'
    import {createRoot} from 'react-dom/client'
    import {ViewerCanvas, Asset, Model} from '@threepipe/plugin-r3f'

    function App(){
        return <div style={{
            position: 'relative',
            width: '80vw',
            height: '80vh',
            margin: '10vh 10vw',
            borderRadius: '0.5rem',
            boxShadow: 'rgba(0, 0, 0, 0.25) 0px 25px 50px -12px',
        }}>
            <ViewerCanvas
                id="three-canvas"
                style={{width: "100%", height: "100%", borderRadius: "inherit"}}
                plugins={[LoadingScreenPlugin]}
                onMount={async (viewer) => {
                    console.log('Loaded Viewer', viewer)
                    _testFinish()
                }}
            >
                <React.Suspense fallback={<mesh>
                    <boxGeometry args={[1, 1, 1]} />
                    <meshStandardMaterial color="orange" />
                </mesh>}>
                    <Asset url={'https://samples.threepipe.org/minimal/venice_sunset_1k.hdr'}
                           autoSetBackground={true}/>
                    <Model url={'https://samples.threepipe.org/minimal/DamagedHelmet/glTF/DamagedHelmet.gltf'}
                           autoScale={true}
                           autoCenter={true}
                    />
                </React.Suspense>

            </ViewerCanvas>
        </div>
    }

    _testStart()
    createRoot(document.getElementById('root')).render(<App/>)
</script>
</body>
</html>
